<template>
  <div class="main-content">
    <div style="background-color: rgba(180,180,238,0.07);">
      <!--      1 文字部分-->
      <div style="margin-bottom: 60px">
        <div style="text-align: center;margin:0 auto;position: relative;">
          <img src="@/assets/newsbanner.jpg" alt="" style="width: 100%;height: 500px">
        </div>
      </div>
    </div>

    <div style="width: 80%; margin: 0 auto;">
      <div class="main-line-1">
        <div class="main-img-text-line">
          <div class="img-text-line" v-for="obj in newsData" >
            <img :src="obj.img" alt="" style="width: 200px;height: 140px;margin-bottom: 20px; margin-right: 15px">
            <div class="img-text-line-right">
              <a class="img-text-line-title overflowShow" @click="$router.push('/front/newsDetail?id=' + obj.id)" style="cursor: pointer">{{obj.title}}</a>
            </div>
            <div style="display: flex;justify-content: space-between;align-items: flex-end">
              <div class="overflowShow" style="margin-bottom: 10px;font-size: 14px;color: #a3a4a5" >
                发布时间 {{obj.time}}</div>
            </div>
          </div>
        </div>

        <!--分页样式-->
        <div class="block" style="text-align: right;margin-top: 20px">
          <el-pagination
              background
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-size="5"
              layout="total, prev, pager, next"
              :total="total">
          </el-pagination>
        </div>
      </div>
    </div>



    <!--      网站介绍-->
    <div style="text-align: center;margin:50px auto" >
      <div style="color: #999797; font-size: 14px;margin-bottom: 20px">欢迎来到我们校园官网，这里提供快捷的请假或活动申请功能，同时你还可以在本网站浏览校园新闻。 </div>
      <div style="color: #999797; font-size: 14px;margin-bottom: 20px">在这里，您可以轻松地浏览各种校园动态，在线快捷参与校园活动。</div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {

  data() {
    return {
      newsData: [],
      pageNum: 1,
      total: 0,
      search:{},

    }
  },
  // 监听路由
  watch: {
    $route(to, from) {
      if(to.path === '/front/index') {
        location.reload()
      }
    }
  },
  mounted() {
    this.loadNews()

  },
  // methods：本页面所有的点击事件或者其他函数定义区
  methods: {
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.loadNews();
    },

    // 分页加载表格数据
    loadNews() {
      request.post("/news/page?pageNum=" + this.pageNum, this.search).then(res => {
        if (res.code === '0') {
          this.newsData = res.data.list;
          this.total = res.data.total;
        } else {
          this.$notify.error(res.msg);
        }
      });
    },


  }
}
</script>